<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍页面</title>
    <link rel="stylesheet" href="css/nav-bottom.css">
    <link rel="stylesheet" href="css/book.css">
    <link rel="stylesheet" href="css/common.css">
  <script src="js/common.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div class="top">
  <div class="h-top">
    <img src="image/cover/cover.png" alt="" class="cover" id="cover">
    <span class="name" id="name">Lorem Ipsum chengShenZhiri</span>
  </div>
  <div class="brief" id="brief">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</div>
</div>
<div class="middle">
  <input type="button" value="上传" class="upload"  onclick="gotoDetail()">
  <div class="title">———Chaper(66)———</div>
  <input type="button" value="单词" class="word" onclick="gotoWord()">
</div>
<ul class="chaper" id="chaper">
  <li v-for="chapter in chapterList">
    <img src="image/del.png" alt="" align="top">
    <span class="chaper-name" v-bind:cid="chapter.cid" @click="gotoContent($event)">{{ chapter.name }}</span>
  </li>
</ul>
<!-- 底部导航栏 -->
<div class="fill"></div>
<div class="nav-bottom">
  <div class="find" id="find"></div>
  <div class="bookshelf" id="bookshelf"></div>
  <div class="word" id="word"></div>
  <div class="my" id="my"></div>
</div>
<!-- 底部导航栏结束 -->
</body>
<script src="js/nav-bottom.js"></script>
<script src="js/book.js"></script>
</html>